import './Home.css';
import { useNavigate } from 'react-router-dom';

const Home = () => {
  const navigate = useNavigate();
  return (
    <div className="home">
      <div className="hero">
        <div className="hero-content">
          <h1>欢迎来到React学习基地</h1>
          <p>掌握React，构建现代Web应用</p>
          <button className="mainButton" onClick={()=> navigate('/concepts')}>开始学习</button>
        </div>
      </div>

      <div className="features">
        <div className="feature">
          <div className="feature-icon">📚</div>
          <h3>系统化教程</h3>
          <p>从基础到高级，循序渐进地学习React的每个知识点</p>
        </div>

        <div className="feature">
          <div className="feature-icon">💻</div>
          <h3>实战项目</h3>
          <p>通过实际项目练习，巩固所学知识，提升实战能力</p>
        </div>

        <div className="feature">
          <div className="feature-icon">👥</div>
          <h3>社区支持</h3>
          <p>加入我们的学习社区，与其他开发者交流学习心得</p>
        </div>
      </div>

      <div className="getting-started">
        <h2>开始学习React</h2>
        <div className="steps">
          <div className="step">
            <div className="step-number">1</div>
            <h3>了解基础知识</h3>
            <p>学习JavaScript ES6+语法和现代前端开发基础</p>
          </div>

          <div className="step">
            <div className="step-number">2</div>
            <h3>安装开发环境</h3>
            <p>配置Node.js、npm和创建React项目的工具</p>
          </div>

          <div className="step">
            <div className="step-number">3</div>
            <h3>创建第一个应用</h3>
            <p>跟随我们的教程，创建你的第一个React应用</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;
